<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/pages/views/taglib.jsp"%>
<html>
<head>
    <title>详细情况</title>

    <link id="vendor" rel="stylesheet" href="${ctxStatic}/css/vendor.css">
    <link id="theme" rel="stylesheet" href="${ctxStatic}/css/ui-light.css">

    <link rel="stylesheet" href="${ctxStatic}/css/bootstrap.min.css">
    <script src="${ctxStatic}/jquery/jquery-1.9.1.min.js"></script>
    <script src="${ctxStatic}/jquery/bootstrap.js"></script>

    <style type="text/css">
        .loading{
            width:160px;
            height:56px;
            position: absolute;
            top:50%;
            left:50%;
            line-height:56px;
            color:#fff;
            padding-left:60px;
            font-size:15px;
            background: #000 url(${ctxStatic}/image/load.gif) no-repeat 10px 50%;
            opacity: 0.7;
            z-index:9999;
            -moz-border-radius:20px;
            -webkit-border-radius:20px;
            border-radius:20px;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
        }
    </style>

    <script type="text/javascript">
        function saveFile(filename,version){
            $("#loading").toggle();
            var catalog = "${catalog}";
            var templatesType = "${templatesType}";
            var path  = "${ctx}/DetailedCon/save";
            var contexts = $("#"+filename+version).val() ;
            $.ajax({
                type: "POST",
                url: path,//"/hnwr/h/stp/stpUpdateContract/save?id="+id,
                data:{
                    "catalog":catalog,
                    "filename":filename,
                    "templatesType":templatesType,
                    "contexts":contexts,
                    "version":version
                },
                datatype: 'text',
                cache: false,
                success: function(data) {
                    $("#loading").toggle();
                    //var jsonData = JSON.parse(data);
                    console.log(data);
                    if(data == 'success') {
                        alert("提交成功");
                    }else  {
                        alert("操作失败");
                    }
                },
                error: function(){    //调用出错执行的函数
                    alert("网络出现问题，请刷新界面。或者联系管理人员"); //请求出错处理
                }
            });
        }

        function changeYmlInfo(ele){
            //alert( ele.value );
            $.each($("#deinfo tr"), function(i){
                this.style.display = 'none';
                if(this.id == ele.value){
                    this.style.display = 'inline';
                }
            });

        }


        function versionDelete(tmp,cata,ver){
            var result = confirm('是否删除！');
            if(!result){return;}


            $("#loading").toggle();

            var path  = "${ctx}/DetailedCon/versionDelete";
            $.ajax({
                type: "POST",
                url: path,//"/hnwr/h/stp/stpUpdateContract/save?id="+id,
                data:{
                    "catalog":cata,
                    "templatesType":tmp,
                    "version":ver
                },
                datatype: 'text',
                cache: false,
                success: function(data) {
                    $("#loading").toggle();
                    console.log(data);
                    if(data == 'success') {
                        alert("提交成功");
                    }else  {
                        alert("操作失败");
                    }
                    //alert(data.desc);
                    location.reload();
                },
                error: function(){    //调用出错执行的函数
                    alert("网络出现问题，请刷新界面。或者联系管理人员"); //请求出错处理
                }
            });
        }
    </script>
</head>
<body>
<div id="loading" class="loading" style="display:none">Loading pages...</div>
<!-- 头部 -->
<header id="ember830" class="ember-view clearfix no-select">

    <nav class="navbar clearfix">
        <div class="container-fluid">
            <div class="navbar-header">
                <ul class="nav">
                    <li>
                        <button class="navbar-brand logo btn">
                        </button>
                    </li>

                    <li class="btn dropdown project-btn r-p0 ">
                        <a  id="environment-dropdown" role="button" href="/GitHubTest/IndexCon"
                           class="btn btn-link dropdown-toggle text-left" aria-haspopup="true" aria-expanded="false"
                           aria-label="环境">
                            <span class="clip"> <i class="icon icon-home project-icon icon-fw">  </i>  &nbsp;应用商店 </span>    </a>
                    </li>
                </ul>
            </div>

        </div>
    </nav>

</header>



<!-- 中部 -->
<section class="well row" style="height: 240px;">
    <div class="col-sm-12 col-md-3">
        <img class="r-mr20" style="height:75px;max-width: 100%;" src="../${imagePath}" alt="${catalog}">
        <br/>
        <br/>
        <div>
            <small><strong>模板名称:</strong> <span class="text-capitalize">${catalog}</span></small>
        </div>
        <div>
            <br/>
        </div>
        <small><strong>支持: </strong>由社区成员维护</small>
    </div>
    <div class="col-sm-12 col-md-9" style="overflow-y: auto; max-height: 200px;">
        <br/>
        <br/>
        <br/>
        <div id="ember2343" class="ember-view">

            <h4>
            ${configyml}
            </h4>
        </div>
    </div>
</section>


<section class="well">
    <h4>模板版本</h4>
    <hr>
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <select id="ember2730" class="ember-view form-control" onchange="changeYmlInfo(this);" style="width:200px;">
                <option value="">选择版本...</option>
            <c:forEach items="${list}" var="ele">
                <option value="tr${ele.verion}">${ele.verion}</option>
            </c:forEach>
            </select>
            <p class="help-block">Select a version of the template to deploy</p>
        </div>
    </div>
    <div>
        <table class="table" id="deinfo">
            <c:forEach items="${list}" var="de">
                <tr id="tr${de.verion}" name="tr${de.verion}" style="display:none;">
                    <td >
                        <textarea class="form-control" id="dockerCompose${de.verion}" rows="15" cols="78">${de.dockerCompose}</textarea>
                        <br/>
                        <input class="btn btn-primary" value="保存 docker" type="button" onclick="saveFile('dockerCompose','${de.verion}')">
                    </td>
                    <td >
                        <textarea class="form-control" id="rancherCompose${de.verion}" rows="15" cols="78">${de.rancherCompose}</textarea>
                        <br/>
                        <input class="btn btn-primary" value="保存 rancher"  type="button" onclick="saveFile('rancherCompose','${de.verion}')">
                    </td>
                    <td>
                        <p>【${de.verion}】</p>
                        <button type="button" class="btn-sm btn-warning"
                                onclick="versionDelete('${templatesType}','${catalog}','${de.verion}')">
                            Version Delete
                        </button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <br/>
        <br/>
        <br/>
    </div>
</section>

<section class="r-plr15 clearfix">

</section>

<!-- 底部 -->

<footer>
    <a href="" class="btn btn-sm btn-link" > v1.5.3 </a>
    <a class="btn btn-sm btn-link" target="blank" href="https://forums.rancher.com/">  帮助   </a>
    <a class="btn btn-sm btn-link" target="blank" href="https://forums.rancher.com/">  文档    </a>
    <a class="btn btn-sm btn-link" target="blank" href="https://forums.rancher.com/">  提交问题 </a>
    <a class="btn btn-sm btn-link" target="blank" href="https://forums.rancher.com/">  论坛   </a>
    <a class="btn btn-sm btn-link" target="blank" href="https://slack.rancher.io/">  Slack   </a>
    <div class="pull-right">
        <div class="compose-download inline-block">
            <a class="dropdown-toggle hand btn btn-sm btn-link" >
                <i class="icon icon-download"> </i>下载CLI<i class="icon icon-chevron-down"> </i>
            </a>
        </div>
    </div>
    <div class="pull-right">
        <div  class="ember-view dropdown language-dropdown inline-block">
            <a href="#" class="dropdown-toggle hand btn btn-sm btn-link lang-select" data-toggle="dropdown"
               aria-expanded="false">
                <i class="icon icon-globe"></i>简体中文<i class="icon icon-chevron-down"></i>
            </a>
        </div>
    </div>
</footer>

</body>
</html>
